<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改专家信息')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-expert-edit" th:object="${bizCourseExpert}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">姓名：</label>
                <div class="col-sm-8">
                    <input name="name" th:field="*{name}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">头像：</label>
                <div class="col-sm-8">
                    <input name="avarta" th:field="*{avarta}" class="form-control" type="hidden">
                    <input name="host" th:field="*{host}" class="form-control" type="hidden">
                    <div class="file-loading">
                        <input class="file" type="file" id="file" name="file" data-min-file-count="1" data-theme="fas">
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">单位：</label>
                <div class="col-sm-8">
                    <input name="organization" th:field="*{organization}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">介绍：</label>
                <div class="col-sm-8">
                    <textarea name="introduce" class="form-control" rows="8">[[*{introduce}]]</textarea>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">显示顺序：</label>
                <div class="col-sm-8">
                    <input name="orderNum" th:field="*{orderNum}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">状态：</label>
                <div class="col-sm-8">
                    <select name="visible" class="form-control m-b" th:with="type=${@dict.getType('biz_visible_status')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{visible}"></option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script type="text/javascript">
        var prefix = ctx + "biz/expert";
        $("#form-expert-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-expert-edit').serialize());
            }
        }

        $("#file").fileinput({
                                 'theme': 'explorer-fas',
                                 'uploadUrl': ctx + "common/upload",
                                 language: 'zh',
                                 allowedFileExtensions: ['jpg', 'gif', 'png'],
                                 dropZoneEnabled: false,
                                 maxFileCount: 1,
                                 autoReplace: true,
                                 initialPreviewAsData: true, // 回显数据设置
                                 overwriteInitial: true,
                                 // previewFileType: ['image'],
                                 initialPreview: [
                                     '[[${bizCourseExpert.avarta}]]'
                                 ],
                                 layoutTemplates: {
                                     actionUpload: '',//去除上传预览缩略图中的上传图片
                                     //actionZoom:'',   //去除上传预览缩略图中的查看详情预览的缩略图标
                                     //actionDownload:'' //去除上传预览缩略图中的下载图标
                                     //actionDelete:'', //去除上传预览的缩略图中的删除图标
                                 },
                                 showUploadedThumbs: false,
                                 showUpload: false,
                             }).on("filebatchselected", function (event, data) {//选择即上传
            if (!!!data[0]) {
                $(this).fileinput("upload") // 上传文件
            }
        }).on("fileuploaded", function (event, data, previewId, index) {
            console.log(event)
            console.log(data)
            const result = data.response
            if (+result.code == +web_status.SUCCESS) {
                $('input[name=avarta]').val(result.url)
                $('input[name=host]').val(result.host)
            } else {
                $.modal.alertError(result.msg);
            }
            console.log('图路径:' + $('input[name=avarta]').val())
        })
    </script>
</body>
</html>